const { defineComponent } = require('san/san')

const Tabs = defineComponent({
    template: `
        <div id="#amb-tabs" class="san-tabs {{TabsBorderBottom?'TabsBorderBottom':''}}">
            <template s-for="v in tablist">
                <a class="tab {{tab === v.id ? 'actived' : ''}}" on-click="changeTab(v.id)">
                    <span>{{v.text}}</span>
                    <template s-if="v.count >= 0">
                        <span>({{v.count || 0}})</span>
                    </template>
                </a>
            </template>
            <div class="pull-right right-ctn">
                <slot name="right"></slot>
            </div>
        </div>
    `,
    changeTab (tab) {
        let _tab = this.data.get('tab')
        if (_tab == tab) return
        this.data.set('tab', tab)
        this.fire('change', tab)
    },
    inited () {
        let tablist = this.data.get('tablist')
        for (let i = 0, len = tablist.length; i < len; i++) {
            if (tablist[i].active) {
                return this.data.set('tab', tablist[i].id)
            }
        }
    },
    initData () {
        return {}
    }
})

module.exports = Tabs